<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自助式分析系统-数据预处理</title>
	<link rel="stylesheet prefetch" href="/a_data/font-awesome.css" />
  	<link rel="stylesheet" href="/a_data/style.css" />
  	<script src="/a_data/js.js"></script>
</head>
<style>
	.flex-container {
		display: -webkit-flex;
		display: flex;
		width: 400px;
		height: 250px;
		background-color: lightgrey;
	}

	.flex-item {
		background-color: cornflowerblue;
		width: 100px;
		height: 100px;
		margin: 10px;
	}
	div{
		border: 1px solid black;
	}
	*{
		margin: 0;
		padding: 0;
		font-family: "NSimSun";
	}
	#main{
		display: flex;
		flex-direction: column;
	}
	#top{
		width: 100%;
		height: 10vh;
		display: flex;
		flex-direction: row;
	}
	#middle{
		width: 100%;
		height: 45vh;
		display: flex;
		flex-direction: row;
	}
	#bottom{
		width: 100%;
		height: 45vh;
		display: flex;
		flex-direction: row;
	}
	#top_left{
		width: 20%;
		height: 100%;
	}
	#top_right{
		width: 80%;
		height: 10vh;
		flex-direction: column;
		overflow-y: hidden;
		overflow-x: scroll;
	}
	#middle_left, #bottom_left{
		width: 20%;
		height: 45vh;
		background: rgb(101 165 214 / 87%);
	}
	#bottom_left{
	 	background: rgba(22, 31, 38, 0.87);
	 	flex-direction: column;
	 }
	#middle_right, #bottom_right{
		width: 20%;
		height: 45vh;
	}
	#middle_c1{
		width: 20%;
		height: 45vh;
	}
	#middle_c2{
		width: 40%;
		height: 45vh;
	}
	#bottom_center{
		width: 60%;
		height: 45vh;
	}
	#message_title{
		text-align: center;
		color: white;
		font-weight: bold;
		line-height: 50px;
		overflow: hidden;
		width: 100%;
		height: 10%;
	}
	#message_content{
		width: 100%;
		height: 80%;
	}
	#message_content ul{
		margin-top: 10px;
	}
	#message_content ul li{
		list-style: none;
		color: white;
		font-weight: bold;
		height: 35px;
		line-height: 35px;
		padding-left: 20px;
	}
	#top_right li{
		border: 1px solid black;
		width:20vh;
		height:10vh;
		display:inline-block;
	}
	#top_right ul{
		display:inline;
		white-space: nowrap;
		width: 100%;
		height: 100%;
	}

	::-webkit-scrollbar{
		width: 7px;
		height: 15px;
		background-color: #F5F5F5;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: #F5F5F5;
	}

	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb{
		border-radius: 10px;
		box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
		background-color: #c8c8c8;
	}
	input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}
	.layui-select-title input{
		text-align: center !important;
	}
	#message_content li{
		text-align: center;
	}
</style>
<body>
	<div id="main">
		<div id="top">
			<div id="top_left">
				<nav>
				   <menu>
					<menuitem>
					 <a id="curr_formula">选择算法</a>
					 <menu style="z-index:999;">
						<menuitem>
					   <a>分类</a>
					   <menu>
						<menuitem class="classification">
						 <a>逻辑斯蒂回归</a>
						</menuitem>
						<menuitem class="classification">
						 <a>SVM支持向量机</a>
						</menuitem>
						<menuitem class="classification">
						 <a>K最近邻分类</a>
						</menuitem>
						<menuitem class="classification">
						 <a>高斯朴素贝叶斯</a>
						</menuitem>
						<menuitem class="classification">
						 <a>分类决策树</a>
						</menuitem>
						<menuitem class="classification">
						 <a>随机森林分类</a>
						</menuitem>
						<menuitem class="classification">
						 <a>梯度提升分类树</a>
						</menuitem>
					   </menu>
					  </menuitem>
						<menuitem>
						   <a>回归</a>
						   <menu>
							<menuitem class="regress">
							 <a>线性回归</a>
							</menuitem>
							<menuitem class="regress">
							 <a>SVM支持向量回归</a>
							</menuitem>
							<menuitem class="regress">
							 <a>最近邻回归</a>
							</menuitem>
							<menuitem class="regress">
							 <a>回归决策数</a>
							</menuitem>
							<menuitem class="regress">
							 <a>随机森林回归</a>
							</menuitem>
							<menuitem class="regress">
							 <a>梯度提升回归树</a>
							</menuitem>
					   </menu>
					  </menuitem>
						<menuitem>
						   <a>聚类</a>
						   <menu>
							<menuitem class="clustering">
							 <a>K-Means</a>
							</menuitem>
							<menuitem class="clustering">
							 <a>DBSCAN</a>
							</menuitem>
							<menuitem class="clustering">
							 <a>Birch</a>
							</menuitem>
					   </menu>
					  </menuitem>
				   </menu>
			</menuitem>
				</menu>
				</nav>
			</div>
			<div id="top_right">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	    <div id="middle">
			<div id="middle_left">
				<ul>
					<li style="height: 10vh;text-align: center;line-height: 10vh;
					color: black; font-weight: bold;letter-spacing:3px;">
						数据预处理
					</li>
					<li style="height: 9vh;text-align: center;line-height: 3vh;">
						训练集<input id="train" type="number" placeholder="训练集" value="80"
							   style="width: 5vh;text-align:center;height:3vh;">%&emsp;
						测试集<input id="test" type="number" placeholder="测试集" value="20"
							   style="width: 5vh;text-align:center;height:3vh;">%
					</li>
					<li style="height: 9vh;text-align: center !important;line-height: 5vh;">
						<form class="layui-form" action="" style="width: 20vh;margin: 0 auto;" id="pretreatment">
							<select name="pretreatment" lay-verify="">
							  <option value="">选择预处理函数</option>
							  <option value="0">标准差标准化</option>
							  <option value="1">归一化</option>
							  <option value="2">二值化</option>
							</select>
						</form>
					</li>
					<li style="height: 9vh;text-align: center !important;line-height: 5vh;">
						PCA降维&emsp; 降低到<input type="number" id="pca" value="2"
									style="width: 5vh;text-align:center;height:3vh;">个维度
					</li>
					<li style="height: 9vh;text-align: center !important;line-height: 5vh;">
						<button class="layui-btn layui-btn-radius" style="background-color:#283836;">预处理</button>
					</li>
				</ul>
			</div>
			<div id="middle_c1"></div>
			<div id="middle_c2"></div>
			<div id="middle_right"></div>
		</div>
	    <div id="bottom">
			<div id="bottom_left">
				<div id="message_title">
					<span style="position: absolute;left: 30px;line-height: 41px;">
						<img src="/images/总指标.png">
					</span>
					<p style="letter-spacing:3px;">参数展示</p>
				</div>
				<div id="message_content">
					<ul>
						<li id="formula" style="overflow: hidden;">未选择算法</li>
						<li id="train_test" style="overflow: hidden;">训练集80% 测试集20%</li>
					</ul>
				</div>
			</div>
			<div id="bottom_center"></div>
			<div id="bottom_right"></div>
		</div>
	</div>

</body>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="/layui/css/layui.css">
<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script src="/js/jquery.js"></script>
<script>

	// 选择的字段数量
	var col_number = 10;
	/*--------------------PCA降维------------------*/
	$("#pca").bind('change', pac);
	function pac(){
		console.log($(this).val())
		if($(this).val() < 2 ){
			$(this).val(2)
		}else if($(this).val() > col_number){
			$(this).val(col_number);
		}
	}
	/*--------------------预处理------------------*/
	 $('#pretreatment').on('select(filter)', function(data){
	 console.log(data.elem); //得到select原始DOM对象
	 console.log(data.value); //得到被选中的值
	 console.log(data.othis); //得到美化后的DOM对象
	});

	/*--------------------监听训练集和测试集------------------*/
	$("#train").bind('change', train_test_input);
	$("#test").bind('change', train_test_input);
	function train_test_input(){
		if($(this).val() < 0 ){
			if($(this).attr('id') === 'train'){
				$(this).val(1);
				$("#test").val(99);
			}else{
				$(this).val(1);
				$("#train").val(99);
			}
		}else if($(this).val() > 99 ){
			if($(this).attr('id') === 'train'){
				$(this).val(99);
				$("#test").val(1);
			}else{
				$(this).val(99);
				$("#train").val(1);
			}
		}else{
			if($(this).attr('id') === 'train'){
				$("#test").val((100-$(this).val()));
			}else{
				$("#train").val((100-$(this).val()));
			}
		}
		$('#train_test').html('训练集'+$("#train").val()+'%&emsp;&emsp;测试集'+$("#test").val()+'%')

	}
	/*--------------------算法选择------------------*/
	$(".clustering").bind('click', formula_select);
	$(".classification").bind('click', formula_select);
	$(".regress").bind('click', formula_select);
	function formula_select(){
		var formula_type = $(this).attr('class')
		var name = $(this).children('a').text()
		var temp = ''
		switch(formula_type){
			case 'regress':
				temp = '回归算法';
				break;
			case 'classification':
				temp = '分类算法';
				break;
			case 'clustering':
				temp = '聚类算法';
				break;
		}

		$('#formula').html(temp+'&emsp;&emsp;'+name);
		$('#curr_formula').text(name);
	}
</script>
</html>